<template>
    <div id="login">
       <el-card>
           <div slot="header">
               <img src="/static/logo.png" alt="">
               问卷系统登陆
           </div>
           <el-form ref="formLogin" :rules="rules" status-icon :model="formLogin" label-width="80px" label-position="left">
               <el-form-item label="用户名" prop="username">
                   <el-input v-model="formLogin.username"></el-input>
               </el-form-item>
                <el-form-item label="密码" prop="password">
                   <el-input v-model="formLogin.password" type="password"></el-input>
               </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登陆</el-button>
                    <el-button @click="$router.push('/regist')">立即注册</el-button>
                </el-form-item>
           </el-form>
       </el-card>
    </div>
</template>
<script>
let m=[
    {
        id:1,
        menu_name:'鞋子',
        parent_id:0,
        status:'1',
        children:[
            {
                id:3,
                menus:'女款',
                parent_id:1,
                status:'1',
                children:[]
            },
            {
                id:4,
                menus:'男款',
                parent_id:1,
                status:'1',
                children:[]
            }
        ],
    },
    {
       id:2,
       menu_name:'鞋子', 
       parent_id:0,
       status:'1',

       children:[]
    }
]
// import { mapState, mapMutations } from "Vuex";
export default {
  data() {
    return {
      rules: {
        username: [
          { required: true, message: "请输入正确的用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" }
        ]
      },
      //用户提交的信息
      formLogin: {
        username: "",
        password: ""
      }
    };
  },
  //登陆成功后只能在首页
  created(){
      if(this.store('logged')){
          this.$router.push("/index")
      }
  },
  methods: {

    //状态管理，映射setLogged,setUserInfo这两个方法
    //...mapMutations(['setLogged','setUserInfo']),
    //点击登录后的数据设置
    login() {
      this.$refs.formLogin.validate(pass => {
        if (pass == true) {
          this.axios.post("/users/login", this.formLogin)
            .then((res) => {
              this.$message({
                type: "success",
                message: "登录成功",
              });
              this.$router.push("/index");
              this.store('logged',true);
              this.store('loggedInfo',res.data);
            }).catch(() => {
              
              this.$message.error("登录失败");
            });
        }
      });
    }
  },
//   computed: {
//     //映射logged，userInfo两个状态
//     ...mapState(["logged", "userInfo"])
//   }
};
</script>
<style>
#login {
  width: 400px;
  margin: 0 auto;
  margin-top: 60px;
}
</style>


